// 双确认超时反馈
<template>
    <f7-page class="common-page page-tab has-bottom-btns">
      <f7-navbar>
          <f7-nav-left>
              <f7-link back icon-material="chevron_left" force></f7-link>
          </f7-nav-left>
          <f7-nav-title>双确认超时反馈</f7-nav-title>
          <f7-nav-right></f7-nav-right>
      </f7-navbar>
      <div class="common-page-content">
        <van-tabs>
          <van-tab name="#tab1" title="监理反馈">
            <!-- 监理反馈 -->
            <div id="tab1">
              <v-accordion title="预警信息" :opened="true">
                <section>
                  <div class="title-box">
                    <h3>{{controlData.property.propertyCode||'--'}}</h3>
                    <span>【{{controlData.installNotify.workSiteCode||'--'}}】</span>
                  </div>
                  <p>{{controlData.engineeBaseInfo.engineeName||'--'}}</p>
                  <p>现场作业：{{models.model.caseType||'--'}}</p>
                  <p>所属阶段：第{{models.model.casePhase||'--'}}阶段</p>
                </section>
                <div class="qzjx-card df-box" v-for="(item,index) in models.model.phaseInfos" :key="index">
                  <div class="index">{{index+1}}</div>
                  <div class="right-content-box">
                    <div class="title">
                      <!-- 施工单位及安装单位均未确认 -->
                      <template v-if="item.conIsTimeout&&item.insIsTimeout">
                        截至 {{item.insTimeoutTime}} {{item.insOrgName}}安装单位专业技术人员({{item.insPersonName}})
                        及
                        {{item.conTimeoutTime}} {{item.conOrgName}}施工单位专职机管员({{item.conPersonName}})
                        未及时对现场安装作业的第{{item.groupNumChinese}}阶段进行双确认
                      </template>
                      <!-- 安装单位未确认 -->
                      <template v-if="item.insIsTimeout&&!item.conIsTimeout">
                        截至 {{item.insTimeoutTime}}，{{item.insOrgName}}安装单位专业技术人员({{item.insPersonName}})未及时对现场安装作业的第{{item.groupNumChinese}}阶段进行双确认
                      </template>
                      <!-- 施工单位未确认 -->
                      <template v-if="item.conIsTimeout&&!item.insIsTimeout">
                        截至 {{item.conTimeoutTime}}，{{item.conOrgName}}施工单位专职机管员({{item.conPersonName}})未及时对现场安装作业的第{{item.groupNumChinese}}阶段进行双确认
                      </template>
                    </div>
                  </div>
                </div>
              </v-accordion>
              <v-accordion title="监理反馈" :opened="true">
                <van-form ref="form" :readonly="!canEdit" class="myForm">
                  <div class="title"><span style="color:#F15A5A;">*</span> 反馈说明</div>
                  <van-field
                    v-model="models.model.memo"
                    rows="5"
                    autosize
                    type="textarea"
                    placeholder="请输入反馈说明"
                    :rules="[{ required: true, message: '请填写' }]"
                  />
                  <div class="title"><span style="color:#F15A5A;">*</span> 说明文件</div>
                  <qm-file-upload
                      ref="explain"
                      :galleryOptions="{ multiple: true, maximum: 9 }"
                      :disabled="!canEdit"
                      :params="{
                          type: 'attach',
                          dataKey: models.model.id,
                          bizType: 'EQM_CONFIRM_OVERTIME_REPLY_FILE',
                      }"
                      uploadId="file1"
                      extensions="jpg,jpeg,png"
                      accept=".jpg,.jpeg,.png"
                      :showOffline="showOffline"
                      v-if="models.model.id"
                  >
                  </qm-file-upload>
                </van-form>
              </v-accordion>
            </div>
          </van-tab>
          <van-tab name="#tab5" title="流程进度">
            <!-- 流程进度 -->
            <div id="tab5" class="p15">
              <section class="qzjx-card">
                <div class="title" style="font-size:16px;">业务流程</div>
                <v-workflow-step :data="history"></v-workflow-step>
              </section>
              <section class="qzjx-card">
                <div class="title" style="font-size:16px;">操作记录</div>
                <v-workflow-list v-if="controlData.workflow" :data="controlData.workflow.history||[]"></v-workflow-list>
              </section>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 审核意见 -->
      <v-popup-opinion
          v-model="showPinion"
          :selectUser="selectUser"
          ref="opinion"
          @save="saveBack()"
      >
      </v-popup-opinion>
      <!-- 审核意见 end -->
      <v-popup-opinion
          v-model="showPinion1"
          :selectUser="selectUser"
          ref="opinion"
          @save="send();showPinion1=false"
      >
      </v-popup-opinion>
      <f7-toolbar position="bottom" no-shadow class="fff" v-if="pageAction=='edit'">
        <!-- 审核 -->
        <f7-button fill class="submit-btn plain-btn" @click="fnCheck('showPinion')" v-if="taskCode!='usertask2'">退回</f7-button>
        <f7-button fill class="submit-btn" @click="fnCheck('showPinion1')">通过</f7-button>
      </f7-toolbar>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController"
import Config from "@/libs/config.js";
export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: ["/workflow/serviceGuideExt/getEntityByCode","/equipment/eqmProcessConfirmOvertime/workflow/getWorkflowViewModel"],
        };
    }

    onInit () {
      this.$params.appCode = "eqmProcessConfirmOvertime";
    }
    onBeforeQuery (type, conditions, params) { }
    onAfterQuery (type, isSuccess, result) {
      if(type=='form'){
        if(result.controlData.progress){
          this.context.history=result.controlData.progress.data
          this.context.taskCode=result.controlData.progress.taskCode
        }else{
          this.context.history=[]
        }
      }else if(type=='form$1'){
        // this.vm.getFileList('EQM_CONFIRM_OVERTIME_REPLY_FILE',result.models.model.id,'list$1',result.controlData.property.equipmentType)
        if(!result.controlData.installNotify) result.controlData.installNotify={}
      }
      return result;
    }
    mixin () {
        return {
          components: {},
            data () {
                return {
                  showPinion:false,
                  showPinion1:false,
                  list$1:[],
                  taskCode:'',
                  controlData:{
                    property:{},
                    workflow:{},
                    engineeBaseInfo:{},
                    maintenanceOrg:{},
                    installOrg:{},
                    installNotify:{},
                  },
                  models:{
                    model:{

                    }
                  },
                  history:[],
                  selectUser: {
                      selectComment: null,
                      comment: null,
                      comments: [],
                      tran: [],
                      activity: "",
                      users: [],
                  },
                  showOffline:false,
                };
            },
            computed: {
                notifyType(){
                    return this.controlData.notifyHandleType=='DIS_NOTIFY'?'拆卸':'安装'
                },
                canEdit(){
                  return this.pageAction=='edit'&&this.taskCode=='usertask2'
                },
            },
            methods: {
              saveBack(){
                this.$f7.preloader.show();
                this.super.fnBackJump(
                  this.selectUser.comment,
                  (result) => {
                    this.$f7.preloader.hide();
                    if (result.success) {
                      this.showPinion=false
                      this.$f7.dialog.alert('退回成功', () => {
                        this.$f7.views.current.router.back({force:true})
                      })
                    }else{
                      this.$f7.dialog.alert(result.message)
                    }
                  },
                  (e)=>{
                    console.log('退回失败---',e);
                    this.$f7.preloader.hide();
                  }
                )
              },
              fnCheck(type){
                if(type=='showPinion1'){
                  this.$refs.form.validate().then(_ => {
                      if (this.$refs.explain.getUploadedCount() < 1) {
                          this.$toast("请上传说明文件")
                          return false
                      }
                      this[type]=true
                  }).catch(err => {
                      console.log(err)
                  })
                }else{
                  this[type]=true
                }
              },
              getFileList(typeCode,dataKey,name,attachCraneType){
                this.$f7.request.post(
                  '/admin/attachmentFormDetail/listUpload', 
                  {typeCode,dataKey,attachCraneType}, 
                  (r) => {
                    r = JSON.parse(r);
                    if (r?.success&&r.parameters.fileList) {
                      this[name]=r.parameters.fileList
                      this.showOffline=r.parameters.offline==1
                      return 
                    }
                    this[name]=[]
                    this.$framework.$f7.dialog.toast("获取文件失败");
                  }
                );
              },
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
/deep/ .accordion{
  margin-top: 10px!important;
  background: #fff;
  .accordion-item-content{
    padding: 15px;
  }
  .qzjx-card{
    box-shadow: 0 0 8px 0 rgba(165, 201, 255, 0.3);
    margin-top: 10px;
    .title{
      margin-bottom: 0!important;
    }
  }
  .van-field{
    background: #F5F7FA;
    border-radius: 8px;
    border: 1px solid #E4E8EB;
    margin: 10px 0;
  }
  .pic_upload.list{
    padding: 10px 0 0;
  }
  .title-box{
    display: flex;
    align-items: center;
    h3{
      color: #242424;
      font-size: 16px;
    }
    span{
      flex-shrink: 0;
    }
    .status{
      font-size: 13px;
      color: #61677A;
    }
  }
}
</style>
